<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ceshi流加载</title>
    <link rel="stylesheet" href="../zujian/layui/css/layui.css">
<body>
<ul id="demo00001" style="margin-left: 30px">

    <li>12</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li><img lay-src="../pic/hashiqi.jpg"></li>
    <li><img lay-src="../pic/hashiqi.jpg"></li>
</ul>
<script src="../zujian/jqueryAndBootStrap/jquery-3.4.1.min.js"></script>
<script src="../zujian/layui/layui.all.js"></script>
<script type="text/javascript">
    layui.use('flow', function(){
        let $ = layui.jquery; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。
        let flow = layui.flow;
        flow.load({
            elem: '#demo00001' //指定列表容器
            ,done: function(page, next){ //到达临界点（默认滚动触发），触发下一页
                let lis = [];
                // php代码

            // <?php
            //         //接口跨域
            //         header('Access-Control-Allow-Origin:*');
            //     $page1=$_GET['page'];
            //     if($page1==1){
            //         echo '{"pages":2,"data":[{"id":"1","page1":"'.$page1.'","title":"fuck1"},{"id":"2","page1":"'.$page1.'","title":"fuck2"}]}';
            //     }else{
            //         echo '{"pages":2,"data":[{"id":"1","page1":"'.$page1.'","title":"fuck1"},{"id":"2","page1":"'.$page1.'","title":"fuck2"}]}';
            //     }
            //注意  "pages":2是服务器必须返回的参数,以便于,前端显示  加载更多  ,  前端必须传递的参数是 page(第几页)
                // //以jQuery的Ajax请求为例，请求下一页数据（注意：page是从2开始返回）
                $.get('http://127.0.0.1:81/phptest01/phptestFlowLoad.php?page='+page, function(res){
                    alert(JSON.stringify(JSON.parse(res).data));
                    //假设你的列表返回在data集合中
                    layui.each(JSON.parse(res).data, function(index, item){
                        lis.push('<li>'+ item.title +'<img lay-src="../pic/李丽珍.gif">'+'</li>');
                    });

                    //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                    //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                    next(lis.join(''), page < JSON.parse(res).pages);
                });
            }
            //滚动条所在元素选择器，默认document。如果你不是通过窗口滚动来触发流加载，而是页面中的某一个容器的滚动条，那么通过该参数指定即可。
            //,scrollElem:""
            //	是否自动加载。默认true。如果设为false，点会在列表底部生成一个“加载更多”的button，则只能点击它才会加载下一页数据。
            ,isAuto:false
            // 用于显示末页内容，可传入任意HTML字符。默认为：没有更多了
            ,end:"木有了"
            //是否开启图片懒加载。默认false。如果设为true，
            // 则只会对在可视区域的图片进行按需加载。但与此同时，在拼接列表字符的时候，你不能给列表中的img元素赋值src，必须要用lay-src取代，如：
            ,isLazyimg:true
            //与底部的临界距离，默认50。即当滚动条与底部产生该距离时，触发加载。注意：只有在isAuto为true时有效。
            //额，等等。。mb=margin-bottom，可不是骂人的呀。
            ,mb:50
        });
        //当你执行这样一个方法时，即对页面中的全部带有lay-src的img元素开启了懒加载（当然你也可以指定相关img）
        flow.lazyimg();

            // <img lay-src="aaa.jpg">
            // <img src="bbb.jpg" alt="該图不会懒加载">






    });
</script>
</body>
</html>